<template>
  <div class="video-box">
      <!-- 视频背景 -->
      <video src="./../../assets/video/wind.mp4"  autoplay="autoplay" muted="muted" loop="loop" class="video-background"></video>
  </div>
  
  <div class="el-form-container">
      <div class="title">hello world</div>
      <!-- 登录表单 -->
      <el-form
          ref="loginFormRef"
          :model="loginForm"
          status-icon
          :rules="rules"
          label-width="120px"
          class="el-loginForm"
      >
          <!-- 用户名输入框 -->
          <el-form-item label="账号" prop="username">
              <el-input v-model="loginForm.username" autocomplete="off" />
          </el-form-item>
          <!-- 密码输入框 -->
          <el-form-item label="密码" prop="password">
              <el-input
                  v-model="loginForm.password"
                  type="password"
                  autocomplete="off"
              />
          </el-form-item>
          <!-- 验证码输入框 -->
          <el-form-item label="验证码" prop="captcha">
              <el-input  maxlength= "5" @keydown.enter="submitForm(loginFormRef)" v-model="loginForm.captcha" style="height:40px"/>
              <!-- 验证码展示框 -->
                <i  class= "captchaBox" @click="getCaptcha" v-html="showCaptch" style="height:40px ;background-color:#fff;"></i>
          </el-form-item>
          <!-- 登录按钮 -->
          <el-form-item>
              <el-button type="primary" @click="submitForm(loginFormRef)">点击登录</el-button>
          </el-form-item>
          <!-- 加载状态 -->
          <loading v-if="flag">
              <template v-slot:content>
                  <!-- <p>正在加载中...</p> -->
              </template>
          </loading>
      </el-form>
  </div>

</template>

<script setup>
// 点击登录按钮请求接口实现登录
//引入请求登入的方法
import { loginApi } from "./../../api/users"
//引入users的store
import useUser from "./../../store/users"
//引入组合式的路由api
import { useRouter } from "vue-router"
//路由对象
let router = useRouter()
//store对象
let userStore = useUser()
//引入获取验证码的方法
import { getCaptchaApi } from "./../../api/users"
// 引入校验验证码的方法
import { verifyCaptchaApi } from "./../../api/users"

// 引入loading组件
import loading from "./../../pages/loading/index.vue"
import {storeToRefs} from "pinia"
let {flag} = storeToRefs(userStore)
console.log(flag)

import { reactive, ref ,onMounted} from 'vue'

const loginFormRef = ref()

// 验证规则
const validateUsername = (rule, value, callback) => {
  let reg = /^[a-zA-z_0-9]{3,10}$/;
  if (reg.test(value)) {
      callback()
  } else {
      callback('以字母数字下划线组成,3-10位')
  }
}
const validatePassword = (rule, value, callback) => {
  if (!value) {
      callback('密码不能为空')
  }else{
    callback()
  }
}
const validateCaptcha = (rule, value, callback) => {
  if (!value) {
      callback('验证码不能为空')
  }else{
    callback()
  }
}

// 表单数据
const loginForm = reactive({
  username: '',
  password: '',
  captcha: '',
})
// 验证码
let showCaptch = ref('')

// 表单验证规则
const rules = reactive({
  username: [{ validator: validateUsername, trigger: 'blur' }],
  password: [{ validator: validatePassword, trigger: 'blur' }],
  captcha: [{ validator: validateCaptcha, trigger: 'blur' }],
})
// 获取验证码
onMounted(() => {
  getCaptcha()
})
// 获取验证码的方法
const getCaptcha = async () => {
  try {
      let res = await getCaptchaApi()
      console.log(res)
      showCaptch.value = res.data.img

  } catch (e) {
      console.log(e)
  }
}
// 校验验证码的方法
const verifyCaptcha = async (captcha) => {
    //将captcha转变成小写
    captcha = typeof captcha === 'string' && captcha.toLowerCase()
  try {
    // 发起请求
      let res = await verifyCaptchaApi(captcha)
      console.log(res)
      return res.data.state
  } catch (e) {
      console.log(e)
      return false
  }
}
//------------------------------------------------------------------------------------

// 提交表单
const submitForm = (formEl) => {
  console.log(formEl)
  if (!formEl) return
  formEl.validate( async (valid) => {
      if (valid) {
          // 显示loading
          flag.value = true;
            //表单校验通过
            try{
                //发起请求,校验验证码
                let captchaVerify = await verifyCaptcha(loginForm.captcha)
                if(captchaVerify){
                    //验证码校验通过
                    //获取登入的结果
                    let res = await loginApi(loginForm.username, loginForm.password)
                    console.log(res)
                    let {permission,userInfo,token} = res.data
                    //将permission和userInfo存储到userStore中
                    userStore.permission.value = permission
                    userStore.userInfo.value = userInfo
                    //将token存到本地
                    sessionStorage.setItem('tk',token)
                    //跳转到首页
                    router.push('/')
                    // 返回结果
                    return res.data.state
                }    
            } catch(e){
                alert('校验失败啦')
                return false
            } finally{
                // 隐藏加载状态
                flag.value = false;
            }
        }else {
          //表单校验失败,不用管
          return false
        }
  })

  
}


 








</script>